<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!-- fn: length replace, splite, sunstring  -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<head>
	<title><spring:message code="label.viewTransactionPage"/></title>
</head>
<sec:authorize access="hasAnyRole('ROLE_USER', 'ROLE_ADMIN')">
<tiles:insertDefinition name="defaultTemplate">
	<tiles:putAttribute name="body">
		<div class="body">
			<div class="col-sm-10 col-md-10 ">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">
							<b><spring:message code="label.viewTransaction"/></b>
						</h3>
					</div>
					<div class="table-responsive">
					<!-- Table -->
					<div id="example">
						<ul class="nav nav-tabs">
							<li class="active"><a data-toggle="tab" href="#sectionA"><spring:message code="label.allTransactions"/> <span class="badge" >${fn:length(TransactionList)}</span></a></li>
							<li><a data-toggle="tab" href="#sectionB"><spring:message code="label.sentTransactions"/> <span class="badge" >${fn:length(sendTransactionList)}</span></a></li>
							<li><a data-toggle="tab" href="#sectionC"><spring:message code="label.receivedTransactions"/> <span class="badge" >${fn:length(receiveTransactionList)}</span></a></li>
						</ul>
					
						<div class="tab-content">
							<div id="sectionA" class="tab-pane fade in active">
								<table class="table table-striped table-bordered table-hover" id="allTransaction">
									<thead>									
										<tr>
											<th></th>
											<th></th>
											<th ></th>
											<th ></th>
											<th ><input placeholder="<spring:message code="label.searchSourceAccount"/>" class="form-control" type="text" id="search" /></th>
											<th ><input placeholder="<spring:message code="label.searchTargetAccount"/>" class="form-control" type="text" id="searchtarget" /></th>
											<th></th>
										</tr>							
										<tr>
											<th>#</th>
											<th><spring:message code="label.state"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.amount" /> ( &#8363; )</th>
											<th style="white-space: nowrap;"><spring:message code="label.date"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.sourceAccount"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.targetAccount"/></th>
											<th><spring:message code="label.description"/></th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="TransactionList" items="${TransactionList}">
											<tr>
												<td>1</td>
												<td><c:forEach var="AccountList" items="${AccountList}">
														<c:if
															test="${TransactionList.accountinfo2.idaccountInfo == AccountList.idaccountInfo}">
															<c:out value="Received"></c:out>
														</c:if>
														<c:if
															test="${TransactionList.accountinfo2.idaccountInfo != AccountList.idaccountInfo}">
															<c:out value="Sent"></c:out>
														</c:if>
													</c:forEach></td>
												<td><fmt:formatNumber pattern="#,##0"
														value="${TransactionList.amount}" /></td>
													<td>${TransactionList.date}</td>
												<td><fmt:formatNumber pattern="0000000000" value="${TransactionList.accountinfo1.idaccountInfo}"/></td>
												<td><fmt:formatNumber pattern="0000000000" value="${TransactionList.accountinfo2.idaccountInfo}"/></td>
												<td>${TransactionList.description}</td>

											</tr>
										</c:forEach>
									</tbody>

								</table>
							</div>
							<div id="sectionB" class="tab-pane fade">
								<table class="table table-striped table-bordered table-hover"
									id="sendTransaction">
									<thead>
										<tr>
											<th>#</th>
											<th style="white-space: nowrap;"><spring:message code="label.targetAccount"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.amount"/> ( &#8363; )</th>
											<th style="white-space: nowrap;"><spring:message code="label.beforeBalance"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.afterBalance"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.date"/></th>

											<th><spring:message code="label.description"/></th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="sendTransactionList"
											items="${sendTransactionList}">
											<tr>
												<td>1</td>
												<td><fmt:formatNumber pattern="0000000000" value="${sendTransactionList.accountinfo2.idaccountInfo}"/></td>
												<td><fmt:formatNumber pattern="#,##0"
														value="${sendTransactionList.amount}" /></td>
												<td><fmt:formatNumber pattern="#,##0"
														value="${sendTransactionList.beforeBalance}" /></td>
												<td><fmt:formatNumber pattern="#,##0"
														value="${sendTransactionList.afterBalance}" /></td>

												<td>${sendTransactionList.date}</td>

												<td>${sendTransactionList.description}</td>

											</tr>
										</c:forEach>
									</tbody>
								</table>

							</div>
							<div id="sectionC" class="tab-pane fade">
								<table class="table table-striped table-bordered table-hover"
									id="receiveTransaction">
									<thead>
										<tr>
											<th>#</th>
											<th style="white-space: nowrap;"><spring:message code="label.sourceAccount"/></th>
											<th style="white-space: nowrap;"><spring:message code="label.amount"/> ( &#8363; )</th>
											<th style="white-space: nowrap;"><spring:message code="label.date"/></th>
											<th><spring:message code="label.description"/></th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="receiveTransactionList"
											items="${receiveTransactionList}">
											<tr>
												<td>1</td>
												<td><fmt:formatNumber pattern="0000000000" value="${receiveTransactionList.accountinfo1.idaccountInfo}"/></td>
												<td><fmt:formatNumber pattern="#,##0"
														value="${receiveTransactionList.amount}" /></td>
												<td>${receiveTransactionList.date}</td>
												<td>${receiveTransactionList.description}</td>

											</tr>
										</c:forEach>
									</tbody>
								</table>

							</div>
</div>


						</div>
					</div>
				</div>
				<!--//primary panel  -->
			</div>
		</div>
		<!--//body  -->
	</tiles:putAttribute>
</tiles:insertDefinition>
</sec:authorize>
<script>
	$(document).ready(function() {
		var table = $('#allTransaction').DataTable({
					responsive : true,
					//auto increase collumn
					"fnDrawCallback" : function(oSettings) 
					{
							/* Need to redo the counters if filtered or sorted */
							if (oSettings.bSorted|| oSettings.bFiltered) {
								for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) 
								{
									$('td:eq(0)',oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
								}
							}
					},
					"aoColumnDefs" : [{"bSortable" : false,"aTargets" : [ 0 ]}],"aaSorting" : [ [ 3, 'dsc' ] ]});

		$('#search').on('keyup change', function() {table.columns(4).search(this.value).draw();});
		$('#searchtarget').on('keyup change', function() {table.columns(5).search(this.value).draw();});
		$('#sendTransaction').dataTable({
			responsive : true,
			"fnDrawCallback" : function(oSettings)
			{
					/* Need to redo the counters if filtered or sorted */
					if (oSettings.bSorted|| oSettings.bFiltered) 
					{
						for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) 
						{
							$('td:eq(0)',oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
						}
					}
			},
			"aoColumnDefs" : [{"bSortable" : false,"aTargets" : [ 0 ]}],"aaSorting" : [[ 5, 'dsc' ]]});
		
		$('#receiveTransaction').dataTable(
				{
					responsive : true,
					//auto increase collumn
					"fnDrawCallback" : function(oSettings) 
					{
						/* Need to redo the counters if filtered or sorted */
						if (oSettings.bSorted|| oSettings.bFiltered) 
						{
							for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) 
							{
								$('td:eq(0)',oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
							}
						}
					},
					"aoColumnDefs" : [ {"bSortable" : false,"aTargets" : [ 0 ]} ],"aaSorting" : [ [ 3, 'dsc' ] ]});
				});

	$("#viewtrans").addClass('active1'); // activated list-item
	//show advance search
	$("#advanceSearch").show();
</script>